<template>
    <el-card class="jxc_dashboard_container">
        <div class="card_container">
            <div class="text1">系统包括系统管理、销售管理、采购管理、库存管理、财务管理、统计报表。</div>
            <div class="text2">请先进行系统配置(选择行业、各项个性设置），再设置仓库、物料信息，最后操作主体功能，按需修改“导出模板配置”。</div>
            <div class="text2">可以单独使用库存管理，通过入库单、出库单的操作（操作流程：新建、审核、执行入库/出库操作）更新库存，可定时进行库存盘点，可根据盘点结果更新库存。</div>
            <div class="text2">采购管理包括采购单、采购退货单，销售管理包括销售单、销售退货单，退货单可以手动录入，也可以从采购单、销售单列表中快速录入，然后再到退货单中进行操作。可快速生成出入库单、对账单。</div>
            <div class="text2">对账单记录客户、供应商的往来账单，并显示当前的余额。在采购单、销售单列表中能快速生成对账单，预付款、销售费用等其他类型的账单需要在对账单功能中直接录入。</div>
            <el-row>
                <el-col :span="8">
                    <div class="item_container" title="点击跳转设置仓库" @click="handleClick('/jxcBaseWarehouse')">
                        <svg-icon icon-class="icon-jxc-ware-house" class-name="icon" />
                        <div class="item_content">
                            <div class="content_title">仓库数量</div>
                            <div class="content_qty">{{ data.warehouse_num || 0 }}</div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="item_container" title="点击跳转设置物料" @click="handleClick('/jxcBaseGoods')">
                        <svg-icon icon-class="icon-jxc-goods" class-name="icon" />
                        <div class="item_content">
                            <div class="content_title">物料数量</div>
                            <div class="content_qty">{{ data.goods_num || 0 }}</div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="item_container" title="点击跳转查看物料库存" @click="handleClick('/jxcStockGoods')">
                        <svg-icon icon-class="icon-jxc-out-bill" class-name="icon" />
                        <div class="item_content">
                            <div class="content_title">库存金额</div>
                            <div class="content_qty">{{ data.stock_amount || 0.00 }}</div>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-row style="margin-top: 30px;">
                <el-col :span="8">
                    <div class="item_container" title="点击跳转查看销售订单" @click="handleClick('/jxcSaleOrder')">
                        <svg-icon icon-class="icon-jxc-sale-order" class-name="icon" />
                        <div class="item_content">
                            <div class="content_title">本月销售单数</div>
                            <div class="content_qty">{{ data.month_sale_order_num || 0 }}</div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="item_container" title="点击跳转查看销售退货单" @click="handleClick('/jxcSaleReturnBill')">
                        <svg-icon icon-class="icon-jxc-out-bill" class-name="icon" />
                        <div class="item_content">
                            <div class="content_title">本月销售退货</div>
                            <div class="content_qty">{{ data.month_sale_return_bill_num || 0 }}</div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="item_container" title="点击跳转查看采购订单" @click="handleClick('/jxcBuyOrder')">
                        <svg-icon icon-class="icon-jxc-buy-order" class-name="icon" />
                        <div class="item_content">
                            <div class="content_title">本月采购单数</div>
                            <div class="content_qty">{{ data.month_buy_order_num || 0 }}</div>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-row style="margin-top: 30px;">
                <el-col :span="8">
                    <div class="item_container" title="点击跳转查看采购退货单" @click="handleClick('/jxcBuyReturnBill')">
                        <svg-icon icon-class="icon-jxc-out-bill" class-name="icon" />
                        <div class="item_content">
                            <div class="content_title">本月采购退货</div>
                            <div class="content_qty">{{ data.month_buy_return_bill_num || 0 }}</div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="item_container" title="点击跳转查看入库单" @click="handleClick('/jxcStockInBill')">
                        <svg-icon icon-class="icon-jxc-in-bill" class-name="icon" />
                        <div class="item_content">
                            <div class="content_title">本月入库单数</div>
                            <div class="content_qty">{{ data.month_stock_in_bill_num || 0 }}</div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="item_container" title="点击跳转查看出库单" @click="handleClick('/jxcStockOutBill')">
                        <svg-icon icon-class="icon-jxc-out-bill" class-name="icon" />
                        <div class="item_content">
                            <div class="content_title">本月出库单数</div>
                            <div class="content_qty">{{ data.month_stock_out_bill_num || 0 }}</div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </el-card>
</template>

<script>
export default {
    name: "jxcDashboard",
    data() {
        return {
            data: {},
        };
    },
    created() {
        const _this = this;
        _this.$bus.$off('updateJxcDashboard').$on('updateJxcDashboard', () => {
            _this.init();
        });
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            const _this = this;
            return _this.fetchData(_this.$api.API_QueryJxcDashboard).then(result => {
                _this.data = result.data || {};
            }).catch(() => {
            });
        },
        handleClick(type) {
            this.$router.push(type);
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
    .jxc_dashboard_container {

        /deep/.el-card__body {
            .card_container {
                width: 80%;
                margin: 0 auto;
                padding-top: 20px;
            }
        }

        /deep/ .text1 {
            font-size: 18px;
            padding-bottom: 30px;
        }

        /deep/ .text2 {
            font-size: 16px;
            padding-bottom: 30px;
        }

        /deep/ .item_container {
            padding: 10px 30px 0;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 200px;
            margin: 0 auto;

            .icon {
                font-size: 45px;
            }

            .item_content {
                height: 45px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: flex-end;

                .content_title {
                    font-size: 14px;
                    color: #7F7F7F;
                    font-weight: bold;
                }

                .content_qty {
                    margin-right: 5px;
                    font-size: 20px;
                    color: #1890FF;
                }

            }
        }
    }
</style>
